import React, { Component } from 'react';
import { Card, Table, Row, Col, Button, Icon, Modal, message, Tooltip } from 'antd';
import * as apis from '@/services/SystemMgr';
import qs from 'qs';
import umiRequest from 'umi-request';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './index.less';
import Upload from './components/Upload';
import FileBtn from '@/components/FileBtn';
import AuthorizedButton from '@/components/AuthorizedButton';
import Mpagination from '../SystemManage/components/Mpagination';

const { confirm } = Modal;
class Guideline extends Component {
  state = {
    total: '0', // 列表的总条数
    current: '1', // 当前页数
    pageSize: '20', // 每页条数
    pages: '0', // 总页数
    columns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 50,
        align: 'center',
      },
      {
        title: '文件名称',
        dataIndex: 'fileName',
        key: 'fileName',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '文件描述',
        dataIndex: 'fileDesc',
        key: 'fileDesc',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      // 操作指引下载bug
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        align: 'center',
        width: 150,
        render: (text, record) => (
          <Row type="flex" justify="center">
            {this.props.match.url === '/SystemManage/Guideline' ? (
              <AuthorizedButton authority="SystemManage_Guideline_preview">
                <Col>
                  <FileBtn
                    fileId={record.id}
                    fileName={record.downloadUrl}
                    clickType="btnClick"
                    titleNmae={false}
                  />
                </Col>
              </AuthorizedButton>
            ) : (
              <Col>
                <FileBtn
                  fileId={record.id}
                  fileName={record.downloadUrl}
                  clickType="btnClick"
                  titleNmae={false}
                />
              </Col>
            )}
            {this.props.match.url === '/SystemManage/Guideline' ? (
              <AuthorizedButton authority="SystemManage_Guideline_download">
                <Col>
                  <Button
                    type="link"
                    onClick={() => {
                      const params = {
                        fileId: record.id,
                      };
                      const sessionToken = localStorage.getItem('sessionToken');
                      const exportQueryString = qs.stringify({ ...params, sessionToken });
                      window.open(
                        `${process.env.apiUrl}/api/v1/fileUpload/download?${exportQueryString}`,
                      );
                    }}
                  >
                    下载
                  </Button>
                </Col>
              </AuthorizedButton>
            ) : (
              <Col>
                <Button
                  type="link"
                  onClick={() => {
                    const params = {
                      fileId: record.id,
                    };
                    const sessionToken = localStorage.getItem('sessionToken');
                    const exportQueryString = qs.stringify({ ...params, sessionToken });
                    window.open(
                      `${process.env.apiUrl}/api/v1/fileUpload/download?${exportQueryString}`,
                    );
                  }}
                >
                  下载
                </Button>
              </Col>
            )}
            {this.props.match.url === '/SystemManage/Guideline' ? (
              <AuthorizedButton authority="SystemManage_Guideline_delete">
                <Col>
                  <Button type="link" onClick={() => this.handleDelete(record)}>
                    删除
                  </Button>
                </Col>
              </AuthorizedButton>
            ) : null}
          </Row>
        ),
      },
    ],
    dataSource: [],
  };

  componentDidMount() {
    const { current, pageSize } = this.state;
    const params = {
      current,
      pageSize,
    };
    this.getData(params);
  }

  getData(params) {
    this.setState({ loading: true });
    apis.getOperGuideListUsingGET({ params }).then(result => {
      if (result && result.code * 1 === 1) {
        result.data.list.forEach((item, index) => {
          const x = item;
          x.key = item.id;
          x.index = result.data.pageSize * (result.data.current - 1) + index + 1;
        });

        this.setState({
          total: result.data.total,
          current: result.data.current,
          pageSize: result.data.pageSize,
          pages: result.data.pages,
          loading: false,
          dataSource: result.data.list,
        });
      } else {
        this.setState({
          loading: false,
        });
      }
    });
  }

  handleUpload = () => {};

  handlePaginationChange = (current, pageSize) => {
    const params = {
      current,
      pageSize,
    };
    this.getData(params);
  };

  handleDelete = record => {
    const sfl = this;
    const { current, pageSize } = this.state;
    const params = {
      current,
      pageSize,
    };
    confirm({
      title: '删除此项操作指引吗?',
      content: '确定后将删除此项操作指引吗',
      cancelText: '取消',
      okText: '确定',
      onOk() {
        apis
          .deleteOperGuideUsingDELETE({
            params: {
              id: record.id,
            },
          })
          .then(result => {
            if (result && result.code * 1 === 1) {
              message.success(result.message);
              sfl.getData(params);
            }
          });
      },
    });
  };

  render() {
    const { columns, dataSource, loading, current, pageSize } = this.state;
    const attribute = {
      value: (
        <>
          <Icon type="upload" />
          上传
        </>
      ),
      title: '上传',
      btnType: 'primary',
      width: 500,
    };
    return (
      <div className={styles.Guideline}>
        <PageHeaderWrapper
          breadcrumb={null}
          extra={
            this.props.match.url === '/SystemManage/Guideline' ? (
              <AuthorizedButton authority="SystemManage_Guideline_push">
                <Upload attribute={attribute} upData={() => this.getData({ pageSize, current })} />
              </AuthorizedButton>
            ) : null
          }
        >
          <Card>
            <div className="crar-content">
              <Table
                columns={columns}
                bordered
                size="middle"
                dataSource={dataSource}
                loading={loading}
                pagination={false}
                scroll={{ y: 460 }}
              />
              <Mpagination
                total={this.state.total}
                pageSize={this.state.pageSize}
                current={this.state.current}
                pages={this.state.pages}
                onShowSizeChange={(c, p) => this.handlePaginationChange(c, p)}
                handlePaginationChange={this.handlePaginationChange}
              />
            </div>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default Guideline;
